<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<title>用户删除</title>
</head>
<body>
	<div id="app">
		<h1 style="text-align: center;">用户删除</h1>
		<el-table
			ref="singleTable"
			:data="tableData"
			tooltip-effect="dark"
			highlight-current-row
			style="width: 100%"
			@selection-change="handleSelectionChange">
			<el-table-column
			  type="selection"
			  width="50">
			</el-table-column>
			<el-table-column
			prop="id"
			label="编号"
			width="120">
			</el-table-column>
			<el-table-column
			prop="name"
			label="姓名"
			width="120">
			</el-table-column>
			<el-table-column
			prop="sex"
			label="性别"
			width="120">
			</el-table-column>
			<el-table-column
			prop="password"
			label="密码"
			width="120"
			show-overflow-tooltip>
			</el-table-column>
			  <el-table-column label="操作">
				  <template slot="header" slot-scope="slot" >
					  操作&nbsp;&nbsp;
					  <el-button size="mini" type="success">新增</el-button>
					  <el-button size="mini" type="danger" @click="deleteChoosed">删除所选</el-button>
				  </template>
				  
			      <template slot-scope="scope">
			        <el-button
			          size="mini"
					  type="primary"
			          @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
			        <el-button
			          size="mini"
			          type="danger"
			          @click="handleDelete(scope.$index, scope.row)" @click='deleteChoosed'>删除</el-button>
			      </template>
			    </el-table-column>
			</el-table-column>
		</el-table>
	</div>
	<script>
		var V=new Vue({
			el:'#app',
			data:{
				tableData:[
					{
					"id":"101",
					"name":"张三",
					"password":"123",
					"sex":"男"
					},{
					"id":"102",
					"name":"李思",
					"password":"456",
					"sex":"女"
					},{
					"id":"103",
					"name":"王五",
					"password":"789",
					"sex":"男"
					},{
					"id":"104",
					"name":"赵柳",
					"password":"666",
					"sex":"女"
					}
				],
				multipleSelection:[],
			},
			methods:{
				handleSelectionChange(val){
					this.multipleSelection=val;
			},
			deleteMessage(str,todo){
				this.$confirm(str, '提示', {
				        confirmButtonText: '确定',
				        cancelButtonText: '取消',
				        type: 'warning'
				      }).then(() => {
						todo();
						this.$message({
				          type: 'success',
				          message: '删除成功!'
				        });
				      }).catch(() => {
				        this.$message({
				          type: 'info',
				          message: '已取消删除'
				        });          
				      });
			},
				handleDelete(index,row){
						this.deleteMessage(`确定是否删除用户${row.name}?`,()=>{
								this.tableData.splice(index,1);
					})
				},
					deleteChoosed(){
						this.deleteMessage(`确定是否删除所选用户?`,function(){
						// this.tableData=this.tableData.
						V.tableData=V.tableData.
						filter(x=>!V.multipleSelection.some(y=>y==x));
				})
			}
		},
	});
		
	</script>
	
</body>
</html>
